import React, { useState, useEffect } from 'react';
import { Table, Button, Modal, Tree, message } from 'antd';
import API from '../../../util/api';
import { DeleteOutlined, EditOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
const { confirm } = Modal;
export default function RoleList() {
    const [dataSource, setdataSource] = useState([]);
    const [rightList, setRightList] = useState([]);
    const [currentRights, setcurrentRights] = useState([]);
    const [currentId, setcurrentId] = useState(0);
    const [isModalVisible, setisModalVisible] = useState(false);
    const columns = [
        {
            title: 'ID',
            dataIndex: 'id',
            align: 'center',
            render: (id) => {
                return <b>{id}</b>
            }
        },
        {
            title: '角色名称',
            dataIndex: 'roleName',
            align: 'center'
        },
        {
            title: "操作",
            align: 'center',
            render: (item) => {
                return <div>
                    <Button danger shape="circle" icon={<DeleteOutlined />} onClick={() => confirmMethod(item)} />
                    <Button type="primary" shape="circle" icon={<EditOutlined />} onClick={()=>{
                        setisModalVisible(true);
                        setcurrentRights(item.rights);
                        setcurrentId(item.id);
                    }}/>
                </div>
            }
        }
    ]

    const confirmMethod = (item) => {
        confirm({
            title: '你确定要删除?',
            icon: <ExclamationCircleOutlined />,
            onOk() {
                deleteMethod(item);
            },
            onCancel() {

            },
        });

    }
    //删除
    const deleteMethod = (item) => {
        setdataSource(dataSource.filter(data => data.id !== item.id));
        API.delRole(item.id).then(res => {
            if (res.status === 200) {
                message.success('删除成功!')
            } else {
                message.error(res.statusText);
            }
        });
    }

    useEffect(() => {
        API.roles().then(res => {
            setdataSource(res.data);
        });
    }, [])

    useEffect(() => {
        API.rights({_embed: 'children'}).then(res => {
            setRightList(res.data);
        });
    }, []);


    // 确认修改权限
    const handleOk = ()=>{
        console.log(currentRights,currentId);
        setisModalVisible(false);
        //同步datasource
        setdataSource(dataSource.map(item=>{
            if(item.id === currentId){
                return {
                    ...item,
                    rights:currentRights
                }
            }
            return item;
        }))
        API.changeRole(currentId, { rights:currentRights }).then(res => {
            if (res.status === 200) {
                message.success('修改成功');
            }
        })
        //patch
        // axios.patch(`/roles/${currentId}`,{
        //     rights:currentRights
        // });
    }
    // 关闭
    const handleCancel  = () => {
        setisModalVisible(false);
    }
    //选中
    const onCheck = (checkKeys)=>{
        console.log(checkKeys)
        setcurrentRights(checkKeys.checked);
    }
    return (
        <div>
            <Table  dataSource={dataSource} 
                    columns={columns} 
                    bordered
                    rowKey={(item) => item.id}>
            </Table>

            <Modal title="权限分配" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
            <Tree
                checkable
                checkedKeys = {currentRights}
                onCheck={onCheck}
                checkStrictly = {true}
                treeData={rightList}
            ></Tree>
            </Modal>
        </div>
    )
}
